import React, {Component} from 'react';
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, Icon} from 'weaver-mobile';
import classnames from 'classnames';
import moment from 'moment';

const getLabel = Tools.getLabel;

const days = [
    () => getLabel(398, '星期日'),
    () => getLabel(392, '星期一'),
	() => getLabel(393, '星期二'),
	() => getLabel(394, '星期三'),
	() => getLabel(395, '星期四'),
	() => getLabel(396, '星期五'),
	() => getLabel(397, '星期六')
];

@withRouter
@observer
export default class Header extends Component {
    converDate = (dateStr) => {
        const d = (dateStr != null ? moment(dateStr, 'YYYY-MM-DD') : moment());
        return {
            dateStr: d.format('YYYY-MM-DD'),
            weekday: days[d.day()]()
        }
    }

    render(){
        const {store} = this.props;
        const {baseInfo, showSchedual} = store;
        const {dateStr, weekday} = this.converDate(baseInfo.date);
        const arrowType = showSchedual ? 'up' : 'down';
        const headerClassName = classnames({
            header: true,
            ['header-show-schedual']: showSchedual
        })
        const schedualClassName = classnames({
            schedual: true,
            ['schedual-show']: showSchedual
        })
        
        return (
            <div className={headerClassName}>
                <div className='calendar'>
                    <Icon type='calendar' className='icon' size='md' color='#61A8F5'/>
                    <div>{dateStr}</div>
                    <div>{weekday}</div>
                    <Icon type={arrowType} className='arrow' size='md' onClick={() => {store.showSchedual = !showSchedual}} />
                </div>
                <div className={schedualClassName}>{baseInfo.groupname}</div>
            </div>
        )
    }
}